import React, { Component } from 'react';
import axiox from 'axios'

class Resing extends Component {
    constructor(props) {
        super(props)
        /*
        1.设置状态
        2.改变函数this
        // this.handleClick = this.handleClick.bind(this);
        3.获取refs转发事件
        // this.ref = React.createRef();
         */
        console.log("1.构造函数阶段")
        this.state = {
            animal:"🐒",
            data: []
        }
    }
    static getDerivedStateFromProps(props, state) {
        /* 
            派生状态会导致代码冗余，并使组件难以维护。 确保你已熟悉这些简单的替代方案：
            如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用 componentDidUpdate。
            如果只想在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。
            如果你想在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用 key 使组件完全不受控 代替。
        */
        console.log("2.从props获取派生状态", props, state)
        return null
    }
    render() {
        console.log("3.组件渲染阶段")
        // 渲染阶段注意的事 不要再这里更改状态值就是使用setState，否则会陷入死循环
        return (
            <div>
                生命周期示例
                <h1>{this.state.animal}</h1>
                {this.state.data.map(v => {
                    return <img src={v.img} alt="" key={v.bannerid} />
                })}
                <Tesingchild msg="🐖"></Tesingchild>
            </div>
        );
    }
    componentDidMount() {
        // 1.请求数据
        // 2.添加订阅
        axiox.get("http://daxun.kuboy.top/api/banner").then((result) => {
            console.log(result.data.data)
            this.setState({
                data: result.data.data
            })

        }).catch((err) => {
            console.log(err)
        });
        console.log("4.组件挂载完成阶段")
        // 3.setState
        this.setState({
            animal:"🐅"
        })
        // 4.注册事件
        /* 
               document.getElementById("outerBox").addEventListener("scroll",function(e){
                console.log("盒子滚动啦",e);
                })
        */
    }
}
class Tesingchild extends Component {
    constructor(props){
        super(props)
        this.state={

        }
    }
    static getDerivedStateFromProps(props,state){
        // 这个周期主要用来派发从props来的属性给state
        console.log("------child",props,state)
        return {
            ...props
        }
    }
    // getSnapshotBeforeUpdate()
    render() {
        return <h1>子元素</h1>
    }
}

export default Resing;